<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>ModellHighLighter帮助文档</title>
<script type="text/javascript" src="http://res.waygc.net/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="http://res.waygc.net/js/marked.min.js"></script>
<script type="text/javascript" src="http://waygc.net/res/js/coralian.js"></script>
<script type="text/javascript" src="http://waygc.net/res/js/coralian.client.js"></script>
<script type="text/javascript" src="./../dist/modell-highLighter.js"></script>
<link rel="stylesheet" type="text/css" href="./../dist/modell-highLighter.css" />
<style type="text/css">
	#left, #right{ display: inline-block; vertical-align: top; }
	#right fieldset{ width:720px; min-width:72px; max-width:720px; }
	#left textarea{ width:720px; height: 439px; }
</style>
</head>
<body>
<div id="readme"></div>
<div id="left">
	选择一种语言：<select id="select"></select>
	<input type="button" value="测试效果" onclick="test()" />
	<br /><textarea id="source"></textarea>
</div>
<div id="right">
</div>
<script type="text/javascript">
(function() {
	$.get({
		url : "./modell-highLighter.md",
		dataType: "text",
		success : function(req) {
			$("#readme").html(marked(req));
		}
	});

	var langs = ModellHighLighter.getLangs();

	var select = document.getElementById("select");
	select.appendChild(document.createElement("option"));
	
	for (let i = 0, len = langs.length; i < len; i++) {
		var option = document.createElement("option");
		option.value = option.innerHTML = langs[i];
		select.appendChild(option);
	}
})();

function test() {
	var html = ModellHighLighter.execute(
		document.getElementById("source").value,
		document.getElementById("select").value);
	document.getElementById("right").innerHTML = html;
}
</script>
</body>
</html>